import React from 'react'
import PropTypes from 'prop-types'
import {connect} from 'dva'
import {routerRedux} from 'dva/router'
import {Page} from 'components'
import queryString from 'query-string'
import Filter from './components/Filter'
import List from './components/List'
import {Card, Tabs} from 'antd'


const { TabPane } = Tabs
const FriendStatistics = ({ location, dispatch, loading, friendStatistics }) => {
  const { query, pathname } = location
  const { list, pagination, adAcquireType, condition, empList, departments, tabsKey, dataOfDiagram, filter, start, end, chinaMapData } = friendStatistics
  const handleRefresh = (newQuery) => {
    dispatch(routerRedux.push({
      pathname,
      search: queryString.stringify({
        ...query,
        ...newQuery
      })
    }))
  }

  const filterProps = {
    filter: {
      ...filter
    },
    adAcquireType,
    condition,
    empList,
    departments,
    tabsKey,
    onFilterChange(value) {
      switch (tabsKey) {
        case "table_form":
          dispatch({
            type: "friendStatistics/query",
            payload: {
              ...value
            }
          })
          break;
        case "statistical_chart":
          dispatch({
            type: "friendStatistics/queryStatisticalDiagram",
            payload: {
              ...value
            }
          })
          break;
        case "region_distribution":
          dispatch({
            type: "friendStatistics/getChinaMapData",
            payload: {
              ...value
            }
          })
          break;
      }

      if (value && value.start) {
        dispatch({
          type: 'friendStatistics/updateState',
          payload: {
            start: new Date(value.start),
            end: new Date(value.end),
            filter: value,
          },
        })
      }
    },
    handleSearch(key) {
      if (key) {
        dispatch({
          type: 'friendStatistics/searchEmp',
          payload: {
            key,
          },
        })
      }
    },
    handleOnChange(value) {
      dispatch({
        type: 'friendStatistics/updateCondition',
        payload: {
          condition: value
        }
      })
    },
  }

  const listProps = {
    rowKey: 'id',
    start,
    end,
    dataSource: list,
    loading: loading.effects['friendStatistics/query'],
    pagination,
    location,
    onChange(page) {
      handleRefresh({
        current: page.current,
        size: page.pageSize
      })
    }
  }

  const handleTabsKeyOnChange = (value) => {
    console.log(value)
    switch (value) {
      case "table_form":
        dispatch({
          type: "friendStatistics/query",
        })
        break;
      case "statistical_chart":
        dispatch({
          type: "friendStatistics/queryStatisticalDiagram",
        })
        break;
      case "region_distribution":
        dispatch({
          type: "friendStatistics/getChinaMapData",
        })
        break;
    }
    dispatch({
      type: 'friendStatistics/updateTabsKey',
      payload: {
        tabsKey: value
      }
    })

  }




  return (
    <div>
      <Card style={{ marginBottom: 12 }}>
        <Filter {...filterProps} />
      </Card>
      <Page inner>
        <Tabs defaultActiveKey="table_form" onChange={handleTabsKeyOnChange}>
          <TabPane tab="统计表格" key="table_form">
            <List {...listProps} />
          </TabPane>
          {/*<TabPane tab="统计图表" key="statistical_chart">
            <StatisticalDiagram dataSource={dataOfDiagram} onChange={(e) => {
              dispatch({
                type: 'friendStatistics/queryStatisticalDiagram',
                payload: {
                  type: e.target.value
                }
              })
            }} />
          </TabPane>*/}
        </Tabs>
      </Page>
    </div>
  )
}

FriendStatistics.propTypes = {
  friendStatistics: PropTypes.object,
  location: PropTypes.object,
  loading: PropTypes.object
}
export default connect(({ friendStatistics, loading }) => ({ friendStatistics, loading }))(FriendStatistics)
